<template>
    <div style="width: 100%; height: 100%;">
        <div id="map20250910" style="width: 100%; height: 100%;"></div>
    </div>
</template>
<script setup>
import { onMounted, defineEmits } from 'vue';
import * as echarts from 'echarts'
import shanximap from './../assets/140.json'

// 在组件完成初始渲染
onMounted(() => {
    mymap()
})

const mymap = () => {
    // 注册地图
    echarts.registerMap('shanxi', shanximap);
    // 初始化图表
    const chart = echarts.init(document.getElementById('map20250910'));
    chart.setOption({
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] }
        },
        series: [{
            name: '山西',
            type: 'map',
            map: 'shanxi',
            roam: false,
            zoom: 1.2,
            label: { show: true },
            data: [
                { name: '太原市', value: 800 },
                // { name: '运城市', value: 600 }
            ]
        }]
    });
    chart.on('click', (params) => {
        // console.log(params.name)
        let data = params.name.substring(0, params.name.length - 1)
        abc(data)
    })
}

// 自定义触发事件
const emit = defineEmits(['myGetClick']);
const abc = (data) => {
    // 调用父组件里的自定义事件
    emit('myGetClick', data);
};  
</script>